<template>
  <view class="container">
    <!-- 登录提示条 -->
    <view class="login-tip" v-if="!hasToken">
      <text>登录后可查看更多精彩内容</text>
      <button class="login-btn" @click="goLogin">去登录</button>
    </view>

    <!-- 顶部操作栏 -->
    <view class="header">
      <text class="title">照片圈</text>
      <view class="upload-btn" @click="handleAction('upload')">
        <uni-icons type="camera-filled" size="24" color="#3a8838"></uni-icons>
      </view>
    </view>

    <!-- 热门话题 -->
    <scroll-view scroll-x class="topics-scroll">
      <template v-if="hasToken && hotTopics.length">
        <view class="topics-list">
          <view class="topic-item" v-for="topic in hotTopics" :key="topic.id" @click="handleAction('topicSelect', topic)">
            <text class="topic-name">#{{topic.name}}</text>
            <text class="topic-count">{{topic.count}}张</text>
          </view>
        </view>
      </template>
      <view v-else class="empty-tip">
        <text>{{ hasToken ? '暂无热门话题' : '登录后查看热门话题' }}</text>
      </view>
    </scroll-view>

    <!-- 照片列表 -->
    <template v-if="hasToken && photos.length">
      <view class="photo-list">
        <view class="photo-item" v-for="photo in photos" :key="photo.id" @click="handleAction('photoSelect', photo)">
          <image :src="photo.url" mode="aspectFill"></image>
          <view class="photo-info">
            <view class="author-info">
              <image :src="photo.avatar" class="avatar" mode="aspectFill"></image>
              <text class="author-name">{{photo.author}}</text>
            </view>
            <view class="photo-stats">
              <view class="stat-item" @click.stop="handleAction('like', photo)">
                <uni-icons type="heart" size="18" color="#666"></uni-icons>
                <text>{{photo.likes}}</text>
              </view>
              <view class="stat-item" @click.stop="handleAction('comment', photo)">
                <uni-icons type="chat" size="18" color="#666"></uni-icons>
                <text>{{photo.comments}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <view v-else class="empty-tip">
      <text>{{ hasToken ? '暂无照片' : '登录后查看照片' }}</text>
    </view>

    <tab-bar :tabIndex="1"></tab-bar>
  </view>
</template>

<script>
import TabBar from '@/components/tab-bar/tab-bar.vue'
import { mockData } from '@/mock/index.js'

export default {
  components: {
    TabBar
  },
  data() {
    return {
      hasToken: false,
      hotTopics: [],
      photos: []
    }
  },
  onLoad() {
    this.checkToken()
  },
  onShow() {
    this.checkToken()
    if (this.hasToken) {
      this.loadData()
    }
  },
  methods: {
    checkToken() {
      const token = uni.getStorageSync('token')
      this.hasToken = !!token
    },
    loadData() {
      // 这里将来可以替换为实际的API调用
      this.hotTopics = mockData.photoCircle.hotTopics
      this.photos = mockData.photoCircle.photos
    },
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    handleAction(type, data) {
      if (!this.hasToken) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      
      switch (type) {
        case 'search':
          console.log('搜索照片')
          break
        case 'upload':
          uni.navigateTo({
            url: '/pages/photo/upload'
          })
          break
        case 'topicSelect':
          console.log('选择话题', data)
          break
        case 'photoSelect':
          console.log('查看照片详情', data)
          break
        case 'like':
          console.log('点赞照片', data)
          break
        case 'comment':
          console.log('评论照片', data)
          break
      }
    }
  }
}
</script>

<style>
.container {
  position: relative;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.upload-btn {
  padding: 10rpx;
}

.topics-scroll {
  padding: 20rpx;
}

.topics-list {
  display: flex;
  overflow-x: auto;
}

.topic-item {
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
}

.topic-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.topic-count {
  font-size: 24rpx;
  color: #999;
}

.photo-list {
  padding: 20rpx;
}

.photo-item {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.photo-info {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.author-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.photo-stats {
  display: flex;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}

.stat-item text {
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
}

.login-tip {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 30rpx;
  background-color: rgba(58, 136, 56, 0.1);
  border-bottom: 1rpx solid rgba(58, 136, 56, 0.2);
}

.login-tip text {
  font-size: 26rpx;
  color: #3a8838;
}

.login-tip .login-btn {
  background: #3a8838;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 30rpx;
  border-radius: 30rpx;
  margin: 0;
  line-height: 1.5;
}

.login-btn::after {
  border: none;
}

.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
}
</style> 